<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/detail.css">
</head>
<body>
    <header>
        <h2>闪购</h2>
        <p class="top">首页</p>
        <p class="top">购物车<span></span></p>
        <p class="user">欢迎：</p>
        <p class="top">退出登录</p>
    </header>

    <main>
        <div class="box"></div>
    </main>

    <footer>&copy; 2025&nbsp;&nbsp;闪购</footer>
    <script src="./js/detail.js"></script>
    <script>
        //退出登录
        const logout = document.querySelector('.top:last-child');
        logout.addEventListener('click', function() {
            localStorage.removeItem('currentUser');
            location.href = 'login.html';
        });

        //首页
        const index = document.querySelector('.top:nth-child(2)');
        index.addEventListener('click', function() {
            location.href = 'index.html';
        });

        //购物车
        const cart = document.querySelector('.top:nth-child(3)');
        cart.addEventListener('click', function() {
            location.href = 'car.html';
        });

        //显示用户名
        const username = document.querySelector('.user');
        name = localStorage.getItem('currentUser');
        username.innerHTML = `欢迎：${name}`;
    </script>
</body>
</html>